<template>
  <div class="comment">
    <div class="detail_bottom">
      <div v-if="currentPage === 0 && hotComments.length !== 0">
        <p class="comment_title">精彩评论</p>
        <div class="comment_box" v-for="(item, index) in hotComments" :key="index">
          <div class="comment_left">
            <img v-lazy="item.user.avatarUrl" alt="">
          </div>
          <div class="comment_right">
            <div class="comment_info1">
              <span class="nickname_common">{{item.user.nickname}}:</span>
              {{item.content}}
            </div>
            <div class="comment_info2" v-if="item.beReplied.length !== 0">
              <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
              {{item.beReplied[0].content}}
            </div>
            <div class="comment_other">
              <span>{{showTime(item.time)}}</span>
              <img src="~@/assets/img/footer/liked.svg" alt="">
              <span>{{item.likedCount}}</span>
            </div>
          </div>
        </div>
        <div class="more_goodComment">更多精彩评论</div>
      </div>
      <div>
        <p class="comment_title">最新评论({{total}})</p>
        <div class="comment_box" v-for="(item, index) in comments" :key="index">
          <div class="comment_left">
            <img v-lazy="item.user.avatarUrl" alt="">
          </div>
          <div class="comment_right">
            <div class="comment_info1">
              <span class="nickname_common">{{item.user.nickname}}:</span>
              {{item.content}}
            </div>
            <div class="comment_info2" v-if="item.beReplied.length !== 0">
              <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
              {{item.beReplied[0].content}}
            </div>
            <div class="comment_other">
              <span>{{showTime(item.time)}}</span>
              <img src="~@/assets/img/footer/liked.svg" alt="">
              <span>{{item.likedCount}}</span>
            </div>
          </div>
        </div>
      </div>
<!--      分页按钮-->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {home} from "@/network/home";
import {formatDate} from '@/components/common/utilis'

export default {
  name: "SonglistDetailComment",
  data(){
    return {
      currentPage: 0, //当前页
      hotComments:[], //热门评论
      comments:[],    //最新评论
      total:0,        //评论数量
    }
  },
  created() {
    this.getSonglistComment(this.$route.params.id,this.currentPage * 15)
  },
  watch:{
    '$route.path'(){
      this.getSonglistComment(this.$route.params.id);
    },
  },
  methods:{
    //格式化评论发表的时间
    showTime(value){
      const date = new Date(value)
      return formatDate(date, 'yyyy年MM月dd日  hh:mm')
    },
    // 获取歌单评论的函数
    getSonglistComment(id, offset){
      home.getSonglistComment(id, offset).then(res => {
        this.comments = res.data.comments
        this.hotComments = res.data.hotComments
        this.total = res.data.total
      })
    },
    //点击分页切换页数的函数
    handleCurrentChange(newPage){
      this.currentPage = newPage - 1
      this.getSonglistComment(this.$route.params.id,this.currentPage * 15)
    }
  },
}
</script>

<style scoped>
.comment{
  margin-left: 65px;
  margin-right: 100px;
}
.comment_box{
  display: flex;
  width: 750px;
  padding: 20px 0;
  margin: 0 auto;
  font-size: 13px;
  border-bottom: 1px solid #E1E1E5;
}
.comment_left{
  width: 80px;
}
.comment_left img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 25px;
  margin-top: 7px;
}
.comment_right{
  flex: 1;
  line-height: 22px;
}
.nickname_common{
  color: #5070d0;
}
.comment_title{
  color: #2a2727;
  font-weight: 550;
  margin-left: 20px;
  margin-top: 20px;
}
.more_goodComment{
  width: 120px;
  font-size: 14px;
  line-height: 33px;
  margin: 30px auto;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid #b0b0b6;
  background-color: #ffffff;
}
.comment_info2{
  padding: 5px 10px;
  margin: 5px 0;
  background-color: rgba(104, 94, 94, .1);
}
.comment_other{
  display: flex;
  padding: 8px 0;
}
.comment_other img{
  width: 18px;
  margin-right: 5px;
  margin-left: 450px;
  cursor: pointer;
}


/*分页按钮样式*/
/deep/ .el-pagination{
  width: 400px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}

</style>
